<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-11-15 10:16:22
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-11-30 14:31:26
 * @FilePath: \vue-openlayers\src\components\HelloOpenlayers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="container">
    <h3 class="h3">采用XYZ方式，解决地图加载不出来的问题</h3>
    <el-button
      class="button"
      @click="open2"
    >
      XYZ方式介绍
    </el-button>
    <div id="vue-openlayers" />
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ } from 'ol/source'

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },

  methods: {
  // 初始化地图
    initMap() {
      // 创建一个图层
      const osmLayer = new TileLayer({
        // 使用XYZ的方式加载瓦片图
        source: new XYZ({
          // //OpenStreetMap的瓦片URl
          url: 'http://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png'
        })
      })

      // 创建地图
      this.map = new Map({
        // 绑定div,作为地图容器
        target: 'vue-openlayers',
        // 设置图层
        layers: [
          osmLayer
        ],
        // 设置视图
        view: new View({
          projection: 'EPSG:4326',
          center: [116.389, 39.903],
          zoom: 8
        })
      })
    },
    open2() {
      const h = this.$createElement
      this.$notify({
        title: '提示',
        message: h('i', { style: 'color: teal' }, 'Openlayers提供了ol.source.XYZ这样一个类加载XYZ方式的瓦片地图,其中X是指瓦片的行号，Y是指瓦片的列号，Z是指瓦片的级数，这三者相结合，就能确定在某一个缩放级别下的唯一一张地图瓦片，因此只要我们指定了所有地图瓦片的通用URL，那么我们就能加载该地图'),
        duration: 15000
      })
    }
  }
}

</script>
<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 550px;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
.button{
  margin-left: 500px;
}
</style>
